<template>
  <div class="container">
    <el-row>
      <el-col :span="9">
        <el-input
          v-model="noPopPermKeyword"
          suffix-icon="el-icon-search"
          placeholder="关键词"
        />
      </el-col>
      <el-col :span="9" :offset="5">
        <el-input
          v-model="popPermKeyword"
          suffix-icon="el-icon-search"
          placeholder="关键词"
        />
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="9">
        <el-table
          v-loading="noPopPermLoad"
          :data="noPopPermList"
          max-height="700px"
          class="perm-list"
          :show-header="false"
          @selection-change="handleChangeAddSelected"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="popdomname">
            <template slot-scope="{ row }">
              {{ row.menuname }} - {{ row.popdomname }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="3" :offset="1" class="button-bar">
        <el-col>
          <el-button
            v-show="hasAdd"
            type="primary"
            style="width: 100%"
            icon="el-icon-right"
            @click="handleAddPerms"
          >
            添加
          </el-button>
        </el-col>
        <el-col style="margin-top: 50%">
          <el-button
            v-show="hasDelete"
            type="danger"
            style="width: 100%"
            icon="el-icon-back"
            @click="handleRemovePerms"
          >
            移除
          </el-button>
        </el-col>
      </el-col>
      <el-col :span="9" :offset="1">
        <el-table
          v-loading="popPermLoad"
          :data="popPermList"
          max-height="700px"
          :show-header="false"
          class="perm-list"
          @selection-change="handleChangeRemoveSelected"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="popdomname">
            <template slot-scope="{ row }">
              {{ row.menuname }} - {{ row.popdomname }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, toRefs } from "@vue/composition-api";
import { usePermList } from "./states";
import { hasPermManagePermission } from "./perm";
import { Message } from "element-ui";

export default defineComponent({
  props: {
    data: {
      type: Object,
      required: true,
    },
  },

  setup(props) {
    const { hasAdd, hasDelete, hasSelect } = hasPermManagePermission();

    if (hasSelect === false) {
      Message.warning("您没有对该页面的查询权限..");
      return;
    }

    const { data } = toRefs(props);

    const {
      popPermList,
      noPopPermList,
      popPermLoad,
      noPopPermLoad,
      noPopPermKeyword,
      popPermKeyword,
      handleChangeAddSelected,
      handleChangeRemoveSelected,
      handleAddPerms,
      handleRemovePerms,
    } = usePermList(data);

    return {
      // states
      popPermList,
      noPopPermList,
      popPermLoad,
      noPopPermLoad,
      noPopPermKeyword,
      popPermKeyword,

      // methods
      handleChangeAddSelected,
      handleChangeRemoveSelected,
      handleAddPerms,
      handleRemovePerms,

      // permission
      hasAdd,
      hasDelete,
    };
  },
});
</script>

<style scoped>
.button-bar {
  padding-top: 220px;
}

.perm-list {
  border: #ebeef5 1px solid;
}
</style>
